<template>
  <page-detail>
    <view class="nanny-list">
      <view
          class="nanny-item"
          v-for="(item, index) in dataSource"
          :key="index"
          @click="handleBook(item)"
      >
        <!-- 左侧头像 -->
        <img
            class="avatar"
            :src="item.avatarUrl"
            mode="aspectFill"
        />

        <!-- 中间信息 -->
        <view class="info">
          <view class="name-age">
            <text class="name">{{ item.talentName }}</text>
            <text class="gender">{{ item.talentGender === '1' ? '男':'女' }}</text>
            <text class="age">{{ item.talentAge }}</text>
          </view>
          <view class="work-scope">
            工作范围：{{ item.talentWorkScope }}
          </view>
          <view class="right">
            <van-button
                size="small"
                round
                class="book-btn"
                style="margin-right: 10px"
                @click.stop="showModal(item)"
            >预约
            </van-button>
            <!-- <van-button
                type="primary"
                size="small"
                round
                class="book-btn"
                @click.stop="$toPage(`/pages/consult/consultIm?receiver=${item.talentPhone}`)"
            >咨询
            </van-button> -->
          </view>
        </view>
        <view class="points">{{ item.itemScore }}积分</view>
      </view>
    </view>
    <van-empty v-if="!dataSource.length" description="暂无数据"/>
    <van-popup v-model="showTime" round position="bottom" :style="{ height: '60%' }" get-container="body">
      <ne-pick title="预约" @cancel="showTime=false">
        <div>
          <div style="height:calc((100vh * 0.6) - 44px - 50px);overflow: auto;">
            <van-form ref="form">
              <van-field
                  v-model="appointmentStartTimeName"
                  label="开始时间"
                  placeholder="请选择"
                  readonly
                  clickable
                  @click="showTimeModal('appointmentStartTime')"
                  :rules="[{ required: true, message: '请选择开始时间' }]"
              >
                <template #right-icon>
                  <img src="@/static/image/rl-icon.png" style="width: 16px;height: 16px"/>
                </template>
              </van-field>
              <van-field
                  v-model="appointmentEndTimeName"
                  label="结束时间"
                  placeholder="请选择"
                  readonly
                  clickable
                  @click="showTimeModal('appointmentEndTime')"
                  :rules="[{ required: true, message: '请选择结束时间' }]"
              >
                <template #right-icon>
                  <img src="@/static/image/rl-icon.png" style="width: 16px;height: 16px"/>
                </template>
              </van-field>
            </van-form>
          </div>
          <div class="page-detail_footer box_footer">
            <van-button type="primary" round style="width: 200px;margin: 0 auto;flex: unset" @click="submit">提交</van-button>
          </div>
        </div>
      </ne-pick>
    </van-popup>
    <van-popup v-model="showTimePopup" position="bottom" :close-on-click-overlay="false">
      <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTimePopup=false"
          v-if="timeType==='appointmentStartTime'"
          v-model="appointmentStartTime"
          type="datetime"
          title="开始时间"
          :min-date="minDate"
          :max-date="maxDate"
      />
      <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTimePopup=false"
          v-if="timeType==='appointmentEndTime'"
          v-model="appointmentEndTime"
          type="datetime"
          title="结束时间"
          :min-date="minDate"
          :max-date="maxDate"
      />
    </van-popup>
  </page-detail>
</template>

<script>
import pagingMixin from "../../mixins/pagingMixin";
import NePick from "../../components/NePick.vue";
import dayjs from "dayjs";
import {Dialog, Toast} from "vant";
import {tbAppointmentSave} from "../../api/tbAppointment";
export default {
  name: 'wx_pages_llhz_sharedGrandmother',
  components: {NePick},
  mixins:[pagingMixin],
  data() {
    return {
      nannyList: [],
      restfulApi:'/tbTalentDatabase/page',
      showTimePopup:false,
      appointmentStartTimeName:'',
      appointmentEndTimeName:'',
      appointmentStartTime:new Date(),
      appointmentEndTime:new Date(),
      itemTimeName:'',
      showTime:false,
      timeType:'',
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2099, 10, 1),
      row:{}
    }
  },
  methods: {
    showModal(item){
      this.showTime = true
      this.row = {...item}
    },
    handleBook(item) {
      this.$toPage(`/pages/llhz/sharedDetail?indexCode=${item.indexCode}`)
    },
    dateConfirm(value){
      this.showTimePopup = false
      this[this.timeType] = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      this[`${this.timeType}Name`] = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    showTimeModal(type){
      this.showTimePopup = true
      this.timeType = type
    },
    submit() {
      const _this = this
      const {indexCode,talentName,talentPhone} = _this.row
      const {personName,phone} = _this.userInfo
      const formData = {
        appointmentType:'4',
        itemIndexCode:indexCode,
        appointmentPersonName:personName,
        appointmentPhone:phone,
        appointmentUserId:_this.userInfo.userId,
        appointmentStartTime:dayjs(_this.appointmentStartTime).format('YYYY-MM-DD HH:mm:ss'),
        appointmentEndTime:dayjs(_this.appointmentEndTime).format('YYYY-MM-DD HH:mm:ss'),
        appointmentName:talentName,
        latitude:_this.latitude,
        longitude:_this.longitude,
        talentName:talentName,
        talentUserId:talentPhone,
      };
      const startTime = dayjs(formData.appointmentStartTime);
      const endTime = dayjs(formData.appointmentEndTime);
      const duration = endTime.diff(startTime, 'day');
      if (duration > 1) {
        Toast.fail('预约时间不能超过一天');
        return;
      }
      this.$refs.form.validate().then(()=>{
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        }).then(() => {
          _this.$showLoading("提交中...")
          tbAppointmentSave(formData).then(() => {
            _this.$hideLoading()
            _this.search({talentType:'2'})
            Toast.success('提交成功')
            _this.showTime = false
          }).catch(() => {
            _this.$hideLoading()
          })
        }).catch(() => {});
      })
    },
  },
  onLoad() {
    this.search({talentType:'2'})
  }
}
</script>

<style lang="scss" scoped>
.nanny-list {
  padding: 14px;
  background-color: #ffffff;
  box-sizing: border-box;
  .nanny-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color:$uni-color-success;
    border-radius: 8px;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    // 头像样式
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      margin-right: 16px;
    }

    // 中间信息区域
    .info {
      flex: 1;

      .name-age {
        margin-bottom: 8px;

        .name {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-right: 8px;
        }

        .gender {
          font-size: 14px;
          color: #333333;
          margin-right: 10px;
          position: relative;
          &:after{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right:-4px;
            width: 1px;
            content: '|';
            color: #333333;
            font-weight: bold;
          }
        }

        .age {
          font-size: 14px;
          color: #333333;
        }
      }

      .work-scope {
        font-size: 14px;
        color: #333333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制行数为3 */
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .points {
      font-size: 14px;
      font-weight: bold;
      padding: 2px 10px;
      border-radius: 0 8px 0 8px;
      position: absolute;
      top: 0;
      right: 0;
      background: #66c2ff;
      color: #F8E4A7;
    }

    .right {
      float: right;
      margin-top: 10px;
    }
  }
}
</style>
